<template>
<div class="link-list">
    <Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
        <FormItem>
            <Input v-model="formItem.key" placeholder="输入关键词查找"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="renderTable()">查找</Button>
        </FormItem>
    </Form>
    <div class="action-btn">
        <Button size="small" @click="removeMultiple()" style="margin-right: 8px" type="error">批量删除</Button>
        <Button size="small" @click="showModal()" type="success">添加链接</Button>
    </div>
    <Table border ref="linklist" :columns="tableColumn" :data="dataList" :loading="dataLoading" @on-selection-change="changeData($event)">
        <template #title="{ row }">
            <div class="clearfix">
                <img :src="row.thumb" width="120" height="auto" alt="" class="f-l">
                <a :href="row.url" target="_blank">{{ row.title }}</a>
            </div>
        </template>
        <!-- <template #sort="{row}">
			<InputNumber v-model="row.sort" size="small" :min="0" @on-change="sortDetail(row.id,$event)" />
		</template> -->
        <template #status="{ row }">
            <Tag color="green" v-if="row.status">正常</Tag>
            <Tag color="volcano" v-if="row.status == false">关闭</Tag>
        </template>
        <template #action="{ row, index }">
            <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showEdit(row.id)">编辑</Button>
            <Button type="error" size="small" @click="removeDetail(index,row.id)">删除</Button>
        </template>
    </Table>
    <!-- 分页 -->
    <div class="table-page">
        <Page size="small" ref="listPage" :total="pages.total" :model-value="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
    </div>
    <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="详情" width="640" v-model="showModalStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="detailInfo" ref="linkValidate" label-position="right" :label-width="80" :rules="linkValidate" action="javascript:void(0)">
            <FormItem label="名称" prop="title">
                <Input v-model="detailInfo.title" placeholder="输入名称"></Input>
            </FormItem>
            <FormItem label="上传图片">
                <upload-thumb v-model="detailInfo.thumb" ref="uploadthumb" :defaultList="thumbList"></upload-thumb>
            </FormItem>
            <FormItem label="URL" prop="url">
                <Input v-model="detailInfo.url" placeholder="输入链接地址"></Input>
            </FormItem>
            <FormItem label="状态">
                <Switch :true-value="1" :false-value="0" v-model="detailInfo.status">
					<template #open>正常</template>
					<template #close>禁用</template>
				</Switch>
            </FormItem>
            <FormItem label="排序">
                <InputNumber :max="9999" :min="0" v-model="detailInfo.sort"></InputNumber>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
                <Button type="primary" @click="handleSubmit('linkValidate')">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
</div>
</template>

<script>
import UploadThumb from '../.././components/thumb.vue'
export default {
    name: 'Link',
    data() {
        return {
            detailId:0,
            loading: false,
            dataLoading: true,
            formItem: {
                'key': ''
            },
            pages: {
                current: 1,
                total: 0,
                size: 10
            },
            tableColumn: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: 'Id',
                    key: 'id',
                    width: 60,
                },
                {
                    title: '名称',
                    minWidth: 300,
                    slot: 'title',
                },
                {
                    title: '排序',
                    width: 100,
                    key: 'sort',
                },
                {
                    title: '状态',
                    slot: 'status',
                    width: 90
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 130,
                }
            ],
            dataList: [],
            detailInfo: {
                linktypeId:0,
                title: '',
                thumb: null,
                url: '',
                sort: 0,
                status: 1
            },
            showModalStatus: false,
            linkValidate: {
                title: [
                    { required: true, message: '链接名称必须填写', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: '链接 URL 必须填写', trigger: 'blur' }
                ],
            },
            thumbList:[],
            selectData: [],
        }
    },
    created() {
        this.getTableList();
    },
    components: {
        UploadThumb
    },
    methods: {
        changePage() {
            this.pages.current = this.$refs['listPage'].currentPage;
            this.getTableList();
        },
        changeData(index) {
            this.selectData = index
        },
        getTableList() {
            var params = this.formItem;
            params.size = this.pages.size;
            params.page = this.pages.current;
            this.dataLoading = true;
            this.$api.link.list(params).then(res => {
                this.dataList = res.result.list;
                this.pages.total = res.result.count
            }).finally(e=>{
                this.dataLoading = false;
            });
        },
        renderTable() {
            this.pages.currentPage = 1;
            this.getTableList();
        },
        showModal() {
            this.showModalStatus = !this.showModalStatus;
            this.detailInfo = {
                linktypeId:0,
                title: '',
                thumb: null,
                url: '',
                sort: 0,
                status: 1
            };
            this.detailId = 0;
            this.thumbList = [];
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                this.loading = true;
                if (valid) {
                    // 图片
                    if (this.$refs['uploadthumb'].uploadList.length) {
                        this.detailInfo.thumb = this.$refs['uploadthumb'].uploadList[0].url;
                    } else {
						this.detailInfo.thumb = '';
					}
                    if (this.detailId == 0) {
                        this.$api.link.create(this.detailInfo).then(res => {
                            this.getTableList();
                        }).finally(res => {
                            this.showModalStatus = !this.showModalStatus;
                            this.loading = false;
                        });
                    }else{
                        this.$api.link.update(this.detailInfo).then(res => {
                            this.getTableList();
                        }).finally(res => {
                            this.showModalStatus = !this.showModalStatus;
                            this.loading = false;
                        });
                    }
                } else {
                    this.$Message.error('请检查输入的信息是否正确');
                    this.loading = false;
                }
            })
        },
        showEdit(id){
            this.detailId = id;
            this.loading = true;
            this.$api.link.detail({detailId:id}).then(res => {
                this.detailInfo = res.result;
                this.thumbList = [];
                if (res.result.thumb != '' && res.result.thumb != null) {
                    this.thumbList = [{ 'name': '图片文件', 'url': res.result.thumb, 'status': 'finished' }];
                }
            }).finally(e=>{
                this.loading = false;
            });
            this.showModalStatus = !this.showModalStatus;
        },
        removeDetail(index, id) {
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行</p>',
                onOk: () => {
                    this.$api.link.remove({ detailIds: [id] }).then(res => {
                        this.dataList.splice(index, 1);
                    });
                }
            });
        },
        removeMultiple() {
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行</p>',
                onOk: () => {
                    var ids = [];
                    this.selectData.forEach((item) => {
                        ids.push(item.id);
                    })
                    this.$api.link.remove({ detailIds: ids }).then(res => {
                        this.getTableList();
                    });
                }
            });
        },
        /* sortDetail(id,value) {
            this.$api.link.sort({ id: id,sort:value }).then(res => {
                if (res.code == 200) {
                    this.$Message.success(res.message);
                }
            });
        }, */
    }
}
</script>
